<template>
    <div >
        <div >
            <el-select v-model="aticleInfo.category.id" placeholder="请选择" size="small">
                <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.catename"
                    :value="item.id">
                </el-option>
            </el-select>
            <el-input size="small" placeholder="文章标题" v-model="aticleInfo.title" style="width: 250px; margin-left: 10px"></el-input>
        </div>
        <!--makedown-->
        <div style="height: 450px; margin-top: 10px">
            <mavon-editor ref="md" @imgAdd="$imgAdd" style="height: 90%" v-model="aticleInfo.makdownContent" @save="saveAticle(2)" @change="changeMakdown"></mavon-editor>
            <el-button v-if="!edit" size="small" type="primary" style="float: right;margin-left: 8px;margin-top: 10px" @click="saveAticle(2)">保存到草稿箱</el-button>
            <el-button v-if="!edit" size="small"  type="default" style="float: right;margin-top: 10px" @click="saveAticle(1)" >发表文章</el-button>
            <el-button v-if="edit" size="small" type="primary" style="float: right;margin-left: 8px;margin-top: 10px" @click="saveAticle(2)">修改文章</el-button>
            <el-button v-if="edit" size="small"  type="default" style="float: right;margin-top: 10px" @click="cancle" >放弃修改</el-button>
        </div>
    </div>


</template>

<script>
    import  axios from 'axios'
    export default {
        name: "ArticlRelese",
        data(){
            return{
                aticleInfo:{
                    id:'',
                    category:{
                        id:'',
                    },
                    title:'',
                    makdownContent:'',
                    userinfo:{
                        id:JSON.parse(window.sessionStorage.getItem("loginU")).id,
                    },

                    htmlContent:'',
                    status:0,
                    views:0
                },

                options:[],
                edit:''
            }

        },methods:{
            //放弃修改
            cancle(){
                this.$confirm('文件未修改, 是否修改?', '提示', {
                    confirmButtonText: '继续',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                   // this.$router.push('/articlRelese');
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消修改'
                    });
                    this.knowFrom();
                });

            },
            $imgAdd(pos, $file) {
                // 第一步.将图片上传到服务器.
                var formdata = new FormData();
                formdata.append('file', $file);
                axios({
                    url: '/img/markdownImg',
                    method: 'post',
                    data: formdata,
                    headers: { 'Content-Type': 'multipart/form-data' },
                }).then((res) => {
                    // 第二步.将返回的url(res)替换到文本原位置![...](0) -> ![...](url)
                    /**
                     * $vm 指为mavonEditor实例，可以通过如下两种方式获取
                     * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
                     * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
                     */
                    this.$refs.md.$img2Url(pos, res);
                })
            },
            knowFrom(){
               if(this.$route.query.from) {
                   this.edit=true;
                   if(this.$route.query.id){
                       this.aticleInfo.id=this.$route.query.id;
                       this.getRequest('/aticle/getArticlsById?aid='+this.$route.query.id).then(resp=>{
                           this.aticleInfo.title=resp.title;
                           this.aticleInfo.makdownContent=resp.makdownContent;
                           this.aticleInfo.category.id=resp.category.id;
                       })
                   }
               }
               else {
                   this.edit=false;
               }
            },
            //查询所有栏目
            getColmn(){
                this.getRequest('/cat/getCategory').then(resp=>{
                   if(resp){
                       this.options=resp.list;
                   }

                })
            },
            //Makdown内容改变就有的一个事件
            changeMakdown(value,render){
                this.aticleInfo.htmlContent=render;
            },
            //Makdown自身带的保存事件//添加修改
            saveAticle(status){
                if(this.aticleInfo.id==0){
                    this.aticleInfo.status=status;
                    console.log(this.aticleInfo);
                    if(this.aticleInfo.category.id!=''&&this.aticleInfo.title!=''&&this.aticleInfo.makdownContent!=''){
                        this.postRequest('/aticle/saveAticle',this.aticleInfo).then((resp)=>{
                            if(resp){
                               this.aticleInfo.id=resp.object.id;
                            }
                        })
                    }else{
                        this.message.warning("请正确填写信息");
                    }
                }
                else {
                    this.putRequest('/aticle/updeteAticle',this.aticleInfo).then(resp=>{
                        if(resp){

                        }
                    })
                }
            },
        },mounted() {
            this.getColmn();
            //
            this.knowFrom();
        }
    }
</script>

<style scoped>

</style>